<template>
    <div id="login" :style="style">
        <div class="top">
            <div></div>
            <h2>北京邮电大学图论课程网站</h2>
        </div>
        <div class="middle">
            <div class="tab-bar">
                <span :class="{active:tab==status.login}" @click="toLogin()">登录</span>
                <b>·</b>
                <span :class="{active:tab==status.register}" @click="toRegister()">注册</span>
            </div>
            <div class="hr"></div>
        </div>
        <div class="bottom">
            <form class="login" v-if="tab==status.login">
                <component is="myInput" icon="id" type="text" :deplux.sync="id" placeholder="输入您的学号"></component>
                <component is="myInput" icon="password" type="password" :deplux.sync="password"
                           placeholder="输入您的密码"></component>
                <button @click="login($event)">登录</button>
            </form>
            <form class="register" v-if="tab==status.register">
                <component is="myInput" icon="id" type="text" :deplux.sync="id" placeholder="输入您的学号"></component>
                <component is="myInput" icon="name" type="text" :deplux.sync="name" placeholder="输入您的真实姓名"></component>
                <component is="myInput" icon="email" type="email" :deplux.sync="email"
                           placeholder="输入您的E-mail地址"></component>
                <component is="myInput" icon="gruop" type="text" :deplux.sync="class"
                           placeholder="输入您班级编号"></component>
                <button @click="regist($event)">注册</button>
            </form>
        </div>
    </div>
</template>

<script type="text/babel">
    var Vue = require('../../lib/vue.common.min.js');
    let VueComponent_Input = require('../../component/input/input.vue');
    let md5 = require('../../lib/md5.min.js');

    let tab = {
        login: 1,
        register: 2
    };

    let message = require('../../component/message/message.es6');

    module.exports = {
        props: ['width', 'bannerShow', 'isLogin'],
        data: ()=>({
            id: '',
            password: '',
            name: '',
            email: '',
            class: '',
            status: tab,
            tab: tab.login
        }),
        computed: {
            style: function () {
                return {
                    'width': (this.width * 0.7) + 'px',
                    'left': (this.width * 0.3) + 'px'
                }
            }
        },
        components: {
            myInput: VueComponent_Input
        },
        methods: {
            //切换至登录
            toLogin: function () {
                this.tab = tab.login;
            },
            //切换至注册
            toRegister: function () {
                this.tab = tab.register;
            },
            //登录
            login: function (e) {
                e.preventDefault();
                if (this.id.length == 0) {
                    return message.open('必须输入学号'); //必须输入学号;
                }

                if (this.password == 0) {
                    return message.open('必须输入密码');  //必须输入密码
                }

                this.$http({
                            url: '/api/user/login/',
                            method: 'POST',
                            data: {
                                sid: md5(this.id),
                                password: md5(this.password)
                            }
                        })
                        .then((res)=> {
                            let data = res.data;
                            if (data.code == 0) {
                                this.isLogin = true;
                                router.replace('/notice');
                            } else {
                                message.open(data.msg);
                            }

                        }, function (response) {
                            // error callback
                            message.open('网络连接不太顺畅');

                        });
            },
            //注册
            regist: function (e) {
                e.preventDefault();
                if (this.id.length == 0) {
                    return message.open('必须输入学号'); //必须输入学号;
                }

                if (this.email == 0 || this.email.match(/^([^@]+)@([^@]+)$/) == null) {
                    return message.open('必须填写邮箱'); //必须邮箱
                }

                if (this.name == 0) {
                    return message.open('必须填写真实姓名'); //必须真实姓名
                }

                if (this.class == 0) {
                    return message.open('必须填写班级'); //必须填写班级
                }

                this.$http({
                            url: '/api/user/regist/',
                            method: 'POST',
                            data: {
                                id: this.id,
                                email: this.email,
                                name: this.name,
                                class: this.class
                            }
                        })
                        .then((res)=> {
                            let data = res.data;
                            if (data.code == 0) {
                                //todo 应当跳转到提示页
                                router.replace('/notice');
                                alert('注册成功!请等待审核!')
                            } else {
                                message.open(data.msg);
                            }

                        }, function (response) {
                            // error callback
                            message.open('网络连接不太顺畅');
                        });
            }
        },
        created: function () {
            this.bannerShow = true;
//            this.$http({url: '/api/course/list', method: 'GET'})
//                    .then((res)=> {
//                        // success callback
//                        this.list = res.data.list;
//                    }, function (response) {
//                        // error callback
//                    });
        }
    }
</script>